import { Hole } from '@/types';
import { Edges, Extrude } from '@react-three/drei';
import { HightLight } from './HighlightElement';
import { getExtrudePathByStartAndEnd } from '../utils';
import { getHoleShape } from '../utils';
import { findColor, colorConfig } from './HighlightElement';

export function BaseHole(props: { hole: Hole; hightLight: HightLight }) {
  const { hole, hightLight } = props;

  return (
    <Extrude
      args={[
        getHoleShape(hole),
        {
          depth: hole.depth,
          extrudePath: getExtrudePathByStartAndEnd(hole),
        },
      ]}
    >
      <meshStandardMaterial
        args={[
          {
            color: findColor(
              colorConfig.hole[
                hightLight.holes.includes(hole.holeId) ? 'hightLight' : 'normal'
              ],
              hole.plankFaceId,
            ),
            transparent: true,
            opacity: 0.5,
          },
        ]}
      />
      <Edges scale={1} color="white" />
    </Extrude>
  );
}
